<template>
	<div>
		<!-- 头部导航 -->
		<div class="topBar">
			<div @click="topBar(index)" :style="{'border-bottom':barStatus == index?'3px green solid':''}" v-for="(item,index) in barType">{{item}}</div>
		</div>
		<el-form label-width="80px">
			<el-row>
				<el-col :span="8">
					<el-form-item label="学期" prop="student_name">
					  <el-select v-model="topData.semester_id" placeholder="全部">
					    <el-option v-for="(item,index) in semesterList" :key="index" :label="item.semester_name" :value="item.unid" />
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="年级" prop="student_name">
					  <el-select v-model="topData.grade" placeholder="全部">
					    <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index+1" />
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程" prop="student_name">
					  <el-select v-model="topData.lession_id" placeholder="全部">
					    <el-option v-for="(item,index) in lessionList" :key="index" :label="item.lession_name" :value="item.unid" />
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="授课老师(无)" prop="student_name">
					  <el-input placeholder="全部" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="日期(无)" prop="student_name">
					  <el-input placeholder="开始日期 - 结束日期" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="收费类目(无)" prop="student_name">
					  <el-input placeholder="全部" />
					</el-form-item>
				</el-col>
				<div class="btn">
					<el-button type="primary" @click="queryBy">查询</el-button>
					<el-button @click="rests">重置</el-button>
				</div>
			</el-row>
		</el-form>
		<!-- 课程类 -->
		<table-lession v-if="barStatus == 0" :teachBook="teachBook" :shopcarlist="shopcarlist" ref="less"></table-lession>
		<!-- 教辅类 -->
		<table-aux v-if="barStatus == 1"></table-aux>
		<!-- 杂费类 -->
		<table-inc v-if="barStatus == 2" :incidental="incidental" :shopcarlist="shopcarlist"></table-inc>
		<!-- 分页 -->
		<div class="block">
		    <el-pagination
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page="page"
		        :page-sizes="[5]"
		        :page-size="limit"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="total">
		    </el-pagination>
		</div>
		<!-- 购物车 -->
		<div v-if="shopcar.length">
			<shop-car :shopcar="shopcar"></shop-car>
			<div class="shopcarbtn">
				<el-button type="primary" @click="rest">重置</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { queryPayLession,queryPayItem } from '@/api/studentRecruit.js'
import tableLession from './tableLession.vue'
import tableAux from './tableAux.vue'
import tableInc from './tableInc.vue'
import shopCar from './shopCar.vue'
export default{
	components:{
		tableLession,
		tableAux,
		tableInc,
		shopCar
	},
	data(){
		return{
			topData:{
				lession_id:'',
				semester_id:'',
				grade:'',
			},
			barStatus:0,
			barType:['课程类','教辅类','杂费类'],
			teachBook:[],  //教材
			auxiliary:[],
			incidental:[],
			page:1, //当前页
			limit:5, //一页几条
			total:0, //总条数
			shopcar:[], //购物车
			grade:['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
		}
	},
	created() {
		this.payLession()
		this.queryAuxiliary()
		this.queryIncidental()
	},
	methods:{
		//重置头部输入框
		rests(){
			Object.keys(this.topData).forEach(key => {
				this.topData[key] = ''
			})
		},
		//头部输入框条件查询
		queryBy(){
			switch (this.barStatus){
				case 0:
				this.payLession()
					break;
				case 1:
				this.queryAuxiliary()
					break;
				case 2:
				this.queryIncidental()
					break;
				default:
					break;
			}
		},
		//保存
		save(){
			this.shopcarlistsign(this.shopcar,false)
		},
		//重置
		rest(){
			this.shopcar = []
			this.shopcarlistsign(this.shopcar,true)
		},
		//点击添加购物车
		shopcarlist(row){
			console.log(row);
			let flag = true
			if(this.shopcar.length == 0){
				this.shopcar.push(row)
			}else{
				for (var i = 0; i < this.shopcar.length; i++) {
					if(row.unid == this.shopcar[i].unid){
						flag = true
						this.shopcar[i].pay_num = this.shopcar[i].pay_num+row.pay_num
						this.shopcar[i].price = this.shopcar[i].price+row.price
						console.log('这里是true');
						break
					}else{
						flag = false
						console.log('这里是false');
					}
				}
				if(!flag){
					console.log('这里执行false');
					this.shopcar.push(row)
					flag = true
				}
			}
			console.log('购物车',this.shopcar);
		},
		//导航状态
		topBar(index){
			this.barStatus = index
			this.page = 1
			switch (this.barStatus){
				case 0:
				this.payLession()
					break;
				case 1:
				this.queryAuxiliary()
					break;
				case 2:
				this.queryIncidental()
					break;
				default:
					break;
			}
		},
		//教材类
		async payLession(){
			let resData = {
				page:this.page,
				limit:this.limit,
				lession_id:this.topData.lession_id,
				semester_id:this.topData.semester_id,
				grade:this.topData.grade,
			}
			let data = await queryPayLession(resData)
			if(data.code == 200){
				this.total = data.data.total
				this.teachBook = data.data.list
			}
			console.log('教材类',data);
		},
		//教辅类
		queryAuxiliary(){
			
		},
		//杂费类
		async queryIncidental(){
			let resData = {
				page:this.page,
				limit:this.limit,
				cate_id:"5ff2ecbf82f31"
			}
			let data = await queryPayItem(resData)
			if(data.code == 200){
				this.total = data.data.total
				this.incidental = data.data.list
				for (var i = 0; i < this.incidental.length; i++) {
 					// this.incidental[i].pay_num = 1
					this.$set(this.incidental[i],'pay_num',1)
				}
				console.log('杂费类',this.incidental);
			}
		},
		//分页
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.limit = val
			switch (this.barStatus){
				case 0:
				this.payLession()
					break;
				case 1:
				this.queryAuxiliary()
					break;
				case 2:
				this.queryIncidental()
					break;
				default:
					break;
			}
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val
			switch (this.barStatus){
				case 0:
				this.payLession()
					break;
				case 1:
				this.queryAuxiliary()
					break;
				case 2:
				this.queryIncidental()
					break;
				default:
					break;
			}
		},
	},
	props:{
		semesterList:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
		shopcarlistsign:{
			type:Function,
			default:() => {}
		}
	}
}
</script>

<style lang="scss">
	.topBar{
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
		
		div{
			text-align: center;
			width: 60px;
			height: 30px;
		}
	}
	
	.btn{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.shopcarbtn{
		margin-top: 20px;
		text-align: right;
	}
</style>
